<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩视频</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
        body {
            /* 固定所有面板 */
            position: absolute;
        }
        input {
            /* 设置宽高 */
            width: 200px;
            height: 20px;
        }

        hr {
            /* 设置到边框的距离 */
            margin-top: -30px;
        }
        .vi {
            /* 设置视频占比 */
            width: 60% ;
            /* 设置左边距离 */
            margin-left: 20px;
        }
        .im{
            width: 25%;
            height: 180px;
            /* 设置靠右 */
            float: right;
            /* 设置离右边框的距离 */
            margin-right: 100px;

        }
        h3 {
            float: right;
            /* 设置向上的距离 */
            margin-top: -200px;
            margin-right: 330px;
        }
        .con {
            width: 180px;
            margin-top: -170px;
            float: right;
            margin-right: 245px;
        }
        .d1 {
            float: right;
            margin-top: -170px;
            margin-right: 85px;
        }
        .d2 {
            float: right;
            margin-top: -120px;
            margin-right: 120px;
            /* 设置文字的大小 */
            font-size: 12px;
        }
        .pre2 {
            float: left;
            margin-top: 0px;
            margin-left: 60px;
        }
        .deo {
            width: 180px;
            float: right;
            margin-top: -60px;
            margin-right: 5px;
        }
        .d3 {
            float: right;
            margin-top: -60px;
            margin-right: 75px;
        }
        .d4 {
            float: right;
            margin-top: -1px;
            margin-right: 45px;
            font-size: 12px;
        }
        .bu {
            /* 把按钮换个颜色 */
            background-color: red;
        }
        .search{

                padding: 10px;
                font-size: 16px;
                border: none;
                border-radius: 20px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                width: 300px;
                transition: box-shadow 0.3s ease;
        }


    </style>
</head>
<body>
<!-- 插入图片 文字-->
<h2><pre>
                <!-- 图片地址 相对路径，需要自己添加视频与图片 -->
<a>Pabda熊猫影城<img src="../images/xm.jpeg" width="100px" align="center"> </a> <input class="search" type="text" placeholder="搜索">    <a href="index.html"><img src="./imagem/10006.svg" align="center"> 回到首页  </a>    <img src="./imagem/10001.svg" align="center"> 创作中心       <img src="./imagem/10002.svg" align="center">消息     <button><img src="./imagem/10003.svg" align="center">上传视频</button>      <button class="bu" align="center" >登陆</button>
            </pre></h2><hr>
<!-- 插入视频                                        自动播放  循环播放  视频自动静音播放  基本标签-->
<video class="vi" src="./imagem/键盘-炫酷宣传视频.mp4" autoplay="autoplay" loop muted controls="controls"></video>
<img class="im" src="./imagem/键盘.jpg">
<h3>接下来播放</h3>
<video class="con" src="../images/1.mp4" muted autoplay="autoplay" loop controls="controls"></video>
<div class="d1">100出头的键盘居然有<br> RGB侧灯</div>
<div class="d2">浪子灿灿酱<br>3155粉丝 · 233个视频</div>
<div class="d3">推荐给小白玩家的一把<br>键盘<br><div class="d4" ><br> 浪子灿灿酱<br>3166粉丝 · 233个视频</div></div>
<pre class="pre2">
    1.3万次播放 | 发布时间：2022年3月28日           <img src="./imagem/1.svg" align="center">294      <img src="./imagem/2.svg" align="center">收藏          <img src="./imagem/3.svg" align="center">分享用        <img src="./imagem/4.svg" align="center">手机看      <i>...</i> </pre>
<video class="deo" src="./imagem/2.mp4" muted autoplay="autoplay" loop controls="controls"></video>
</body>
</html>